<template>
	<div class="side-menu-left">
		<transition name="fade-transform" mode="out-in">
			<el-row :key="key">
				<el-col :span="24">
					<el-menu
						default-active="1"
						class="el-menu-vertical"
						@open="handleOpen"
						@close="handleClose"
						background-color="#fff"
						text-color="#000"
						:collapse="false"
						active-text-color="#2D5EA1"
					>
						<template v-for="(item, index) in SideMenuFilter">
							<el-submenu :key="index" v-if="item.children && item.children.length" :index="String(index + 1)">
								<template slot="title">
									<i :class="item.meta.icon"></i>
									<span @click="routerPush(item.name)" style="display:inline-block;width:100%">{{ item.meta.title }}</span>
								</template>
								<el-menu-item-group>
									<el-menu-item
										v-for="(childrenItem, childrenIndex) in item.children"
										v-show="!childrenItem.hidden"
										:key="childrenIndex"
										:index="index + '-' + childrenIndex"
										@click="routerPush(childrenItem.name)"
									>
										{{ childrenItem.meta.title }}
									</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
							<el-menu-item v-else v-show="!item.hidden" :key="index" :index="String(index + 1)" @click="routerPush(item.name)">
								<i :class="item.meta.icon"></i>
								<span slot="title">{{item.meta.title}}</span>
							</el-menu-item>
						</template>
					</el-menu>
				</el-col>
			</el-row>
		</transition>
	</div>
</template>

<script>
	
export default {
	name: 'SideOnLeft',
	props: {
		SideMenu: {
			type: [Object, Array]
		}
	},
	data(){
        return {
			// showRouteArray: ['Map','TaskPlann','TaskPlanningList','NamedManagement','Rule'],
			SYS_TYPE:localStorage.getItem('SYS_TYPE')
		}
	},
	created(){
        console.log()
	},
	computed: {
		showRouteArray(){
            // console.log(this.$store.state.User.router.menus);
              return this.$store.state.User.router.menus
        },
		key() {
			// let path = this.$route.path.split('/');
			let path = this.$route.path
			return path[1];
		},
		SideMenuFilter(){
			let userInfo = {}
			if(localStorage.getItem('userInfo')){
				userInfo = JSON.parse(localStorage.getItem('userInfo'))
			}
			return this.SideMenu.filter((item)=>{
				  if(this.showRouteArray.join(',').indexOf(item.name)!=-1){
                    return item
                }
                // return item.meta.roles.includes(userInfo.userLevel)
			})
		}
	},
	methods: {
		routerPush(name) {
			this.$router.push({
				name
			});
		},
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		}
	}
};
</script>

<style lang="scss">
.side-menu-left {
	width: 300px;
	.el-menu {
		border-right: none;
	}
}
</style>
